<template>
  <div class="panel" v-if="lucky && lucky.coin < 10000">
    <div class="lottery" :class="{'active': isActive}" v-if="lucky">
      <div class="header" @click="isActive = !isActive">
        <h1>抽奖</h1>
        <span>持有抽奖券：{{ lucky.ticket }} 张</span>
      </div>
      <div class="content">
        <div class="rules">
          <p class="title">使用一张xrp抽奖券抽奖一次，有概率获得以下奖励：</p>
          <p class="detail">
            <br>5代小猴（概率10%）
            <br>随机数量蟠桃（1-20个，概率40%）
            <br>随机数量猴毛（9-999根，概率40%）
            <br>大圣战书（概率10%）
          </p>
        </div>
        <box gap="20px 0">
          <x-button class="btn" plain @click.native="lotteryConfirm">
            <p>立即抽奖</p>
            <span>消耗1张抽奖券</span>
          </x-button>
        </box>
        <div class="history">
          <div class="title" @click="refresh">
            <span>抽取记录</span>
            <i :class="{'refresh': refreshing}"></i>
          </div>
          <div class="wrap">
            <div class="item" v-for="(item,index) in luckyList" :key="index">
              <p class="line-1">{{ item.createTime | formatTime }}</p>
              <p class="line-3" v-if="item.type == 1" v-clipboard="item.monkeyHash" @success="isCopy(1)" @error="isCopy(0)" :key="2">hash:{{ item.monkeyHash }}</p>
              <p class="line-4" v-if="item.type == 1">==>
                <router-link :to="`/monkey/${item.monkeyId}`"># {{ item.monkeyId }}</router-link> {{ item.monkeyGeneration }}代 成长{{ item.monkeyGrow }}/<span>生育{{ item.monkeyBear }}/</span>力量{{ item.monkeyMakeMoney }} </p>
              <p class="line-4" v-if="item.type == 2">==> 蟠桃 *{{item.num}}</p>
              <p class="line-4" v-if="item.type == 3">==> 猴毛 *{{item.num}}</p>
              <p class="line-4" v-if="item.type == 4">==> 大圣战书 *{{item.num}}</p>
            </div>
            <infinite-loading @infinite="initData" ref="infiniteLoading2">
              <span slot="no-more"></span>
              <div slot="no-results">
                <br>
                <empty></empty>
              </div>
              <spinner slot="spinner" type="lines"></spinner>
            </infinite-loading>
          </div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showPicker" class="verify">
        <div class="header">
          <h2>{{ $t('安全验证') }}</h2>
          <p>当前绑定手机号码：{{ lucky.address }}</p>
        </div>
        <group>
          <cell title="类型" value="抽奖"></cell>
          <cell title="花费" value="1张抽奖券"></cell>
          <x-input :title="$t('输入验证码')" type="number" v-model="code" class="weui-vcode">
            <x-button @click.native="sendCode" slot="right" :disabled="disabled" type="primary" mini>{{ btnText }}</x-button>
          </x-input>
        </group>
        <box gap="20px">
          <x-button type="primary" @click.native="draw()">{{ $t('确认抽奖') }}</x-button>
          <x-button type="warn" @click.native="showPicker = false">{{ $t('取消') }}</x-button>
        </box>
      </popup>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Box,
    Spinner,
    Group,
    XInput,
    TransferDomDirective as TransferDom,
    Popup,
    Cell
  } from 'vux'
  import empty from '../common/empty.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      empty,
      InfiniteLoading,
      Spinner,
      Popup,
      Group,
      XInput,
      Cell
    },
    data() {
      return {
        isActive: false,
        current: 1,
        luckyList: [],
        lucky: null,
        refreshing: false,
        showPicker: false,
        code: '',
        disabled: false,
        btnText: '发送验证码',
        countdown: 60
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.isBind()
        this.luckyDict()
      });
    },
    methods: {
      initData($state) {
        this.$http
          .post(`/game/myLuckyRecordPage`, {
            current: this.current
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.luckyList = this.luckyList.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.params.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
              setTimeout(() => {
                this.refreshing = false;
              }, 500)
            } else {}
          })
          .catch(function(error) {});
      },
      isBind() {
        var that = this;
        this.$http
          .get(`/users/isBind`)
          .then(res => {
            if (res.code == 200) {
              if (res.result) {} else {
                this.$vux.alert.show({
                  title: '提示',
                  content: '当前账户未绑定钱包地址，请重新登录完成绑定',
                  onHide() {
                    that.$router.replace('/login')
                  }
                })
              }
            } else {}
          })
          .catch(function(error) {});
      },
      lotteryConfirm() {
        var that = this;
        this.luckyDict()
        this.$vux.confirm.show({
          title: '抽奖确认',
          content: `确认消耗1张抽奖券抽奖吗？`,
          onConfirm() {
            if(that.lucky.luckyOpen == 0) {
              // 未开始
              that.$vux.toast.text('抽奖尚未开始')
              return
            }else {
              if(that.lucky.luckyCode == 1) {
                // 需要验证码
                that.showPicker = true
              }else {
                that.draw()
              }
            }
          }
        })
      },
      draw() {
        this.$http
          .post(`/game/v3/luckyMonkey`,{
            code: this.code
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.showPicker = false
              this.lucky.ticket -= 1
              this.refresh()
            } else {}
          })
          .catch(function(error) {});
      },
      refresh() {
        this.refreshing = true;
        this.current = 1;
        this.luckyList = []
        this.$refs.infiniteLoading2.$emit('$InfiniteLoading:reset');
      },
      luckyDict() {
        this.$http
          .get(`/game/luckyDict`)
          .then(res => {
            if (res.code == 200) {
              this.lucky = res.result
            } else {}
          })
          .catch(function(error) {});
      },
      // 发送验证码
      sendCode() {
        this.$http.get(`/game/v2/sendLuckyMonkeyCode`).then((res) => {
          if (res.code == 200) {
            this.countDown60()
            this.$vux.toast.text(res.msg)
          } else {
            this.$vux.toast.text(res.msg)
          }
        }).catch(function(error) {});
      },
      countDown60() {
        var countdown = this.countdown
        if (countdown == 0) {
          this.disabled = false;
          this.btnText = this.$t('发送验证码')
          this.countdown = 60;
          return;
        } else {
          this.disabled = true;
          this.btnText = this.$t('重新发送') + "(" + countdown + ")";
          this.countdown--;
        }
        setTimeout(() => {
          this.countDown60()
        }, 1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .verify {
    background: #fff; // text-align: center;
    .header {
      text-align: center;
    }
  }
  .lottery {
    max-height: 60px;
    transition: all .3s ease;
    overflow: hidden;
  }
  .active {
    max-height: 800px;
    .content {
      margin-top: 18px;
    }
  }
  .header {
    text-align: center;
    h1 {
      font-size: 20px;
      color: $tmdark;
    }
    span {
      font-size: 14px;
      color: $grey;
    }
  }
  .content {
    margin-top: 30px;
    transition: all .5s ease .2s;
    .rules {
      border: 1px solid #ede9e9;
      border-radius: 5px;
      padding: 10px 5px;
      .title {
        font-size: 12px;
        color: $gray;
      }
      .address {
        font-size: 14px;
        color: $green;
        word-break: break-all;
        line-height: 1;
        padding: 15px 0;
      }
      .detail {
        font-size: 10px;
        color: $grey;
        span {
          color: $red;
        }
      }
    }
  }
  .history {
    border: 1px solid #ede9e9;
    border-radius: 5px;
    padding: 10px 5px;
    .title {
      font-size: 16px;
      color: #6c7ea3;
      text-align: center;
      padding: 15px 0;
      span {
        vertical-align: middle;
      }
      i {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        background: url() no-repeat;
        background-size: 100%;
        &.refresh {
          animation: rotating 1s linear infinite;
        }
      }
    }
    .wrap {
      max-height: 400px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .item {
      border-bottom: 1px solid #dfdfdf;
      padding: 5px 0;
      .line-1 {
        font-size: 10px;
        span {
          color: $red;
        }
      }
      .line-2 {
        font-size: 12px;
        color: #6c7ea3;
        word-break: break-all;
      }
      .line-3 {
        font-size: 10px;
        color: $grey;
        word-break: break-all;
      }
      .line-4 {
        font-size: 12px;
        a {
          color: $link;
        }
      }
    }
  }
  .btn {
    width: 185px;
    height: 64px;
    line-height: 1;
    border: 1px solid $green;
    p {
      font-size: 20px;
      color: $green;
    }
    span {
      font-size: 12px;
      color: $gray;
    }
  }
</style>

<style>
  @keyframes rotating {
    from {
      transform: rotate(0)
    }
    to {
      transform: rotate(360deg)
    }
  }
</style>
